<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font 文本字体</title>
</head>
<body>
  <style type="text/css">
    h6 { color: red;}
    /* 示例1 */
    span {
      float: left;
      width: 0.7em;
      font-size: 400%;
      font-family: algerian, courier, sans-serif;
      line-height: 80%;
      line-break: strict;
    }
    
    /* 示例2 */
    .serif { font-family: Times, "Times New Roman", Georgia, serif;}
    .sansserif {  font-family: Verdana, Arial, Helvetica, sans-serif;}
    .monospace { font-family: "Lucida Console", Courier, monospace;}
    .cursive {font-family: cursive;}
    .fantasy {font-family: fantasy;}
    .emoji { font-family: emoji;}
    .math { font-family: math;}
    .fangsong { font-family: fangsong;}
    
    /* 示例3 */
    p.normal {font-variant: normal;}
    p.small { font-variant: small-caps;}
    
    /* 示例4 */
    p.percent { font: 80% sans-serif;}
    /* Set the font weight to bold,
       the font-style to italic,
       the font size to large,
       and the font family to serif. */
    p.large { font: bold italic large serif;}
    /* Use the same font as the status bar of the window */
    p.bar { font: status-bar;}
    
    </style>
    <div class="content">
      <h6>示例1.line-* / font-* 使段落的首字母浮动于左侧，并向这个字母添加样式。</h6>
      <p><span>T</span>his is some text.
      This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      This is some text. This is some text. This is some text.
      </p>
      <p>在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"</p>
      <div class="serif">This is an example of a serif font.</div>
      <div class="sansserif">This is an example of a sans-serif font.</div>
      <div class="monospace">This is an example of a monospace font.</div>
      <div class="cursive">This is an example of a cursive font.</div>
      <div class="fantasy">This is an example of a fantasy font.</div>
      <div class="math">This is an example of a math font.</div>
      <div class="emoji">This is an example of an emoji font.</div>
      <div class="fangsong">作者: WeiyiGeek,公众号【全栈工程师修修炼指南】</div>
    </div>
    
    <div style="font-size: 100%;">
      <h6>示例2.使用em 值创建动态或计算字体大小，使用 rem 值为了避免复合问题。 </h6>
      <span style="font-size: 1em;">1. Outer </span> inner <span style="font-size: 1.8em;"> outer</span> <br>
      <span style="font-size: 1rem;">2. Outer </span> inner <span style="font-size: 1.8rem;"> outer</span>
    </div>
    
    <div>
      <h6>示例3.font-variant 可变字体</h6>
      <p class="normal">WeiyiGeeker</p>
      <p class="small">WeiyiGeeker</p>
    </div>
    
    <div>
      <h6>示例4.font 文本设置</h6>
      <p class="percent">https://weiyigeek.top</p>
      <p class="large">https://www.weiyigeek.top</p>
      <p class="bar">https://blog.weiyigeek.top</p>
    </div>
</body>
</html>